<template>
  <div id="globalHeader">
    <a-row :wrap="false">
      <!--      网站logo-->
      <a-col flex="200px">
        <RouterLink v-if="currentRoute !== '/'" to="/">
<!--          当前路由 ≠ / 则点击Router时候可以跳转到/-->
          <div class="title-bar">
            <image class="logo" src="../assets/logo.svg" alt="logo" />
            <div class="title">智能协同云图库</div>
          </div>
        </RouterLink>
        <a v-else>
<!--          当前路由 == / 时，就不跳转-->
          <div class="title-bar">
            <image class="logo" src="../assets/logo.svg" alt="logo" />
            <div class="title">智能协同云图库</div>
          </div>
        </a>
      </a-col>
      <!--      菜单内容-->
      <a-col flex="auto">
        <a-menu
          v-model:selectedKeys="current"
          mode="horizontal"
          :items="items"
          @click="clickMenuItem"
        />
      </a-col>
      <!--      右侧登录-->
      <a-col flex="120px">
        <div class="user-login-status">
          <div v-if="loginUser.id">
<!--            {{ loginUser.userAccount ?? '无名' }}-->
            <a-dropdown class="user-login-dropdown-trigger">
              <a class="dropdown-user-account">{{loginUser.userAccount ?? '无名'}}</a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a rel="noopener noreferrer" @click="outLoginClick">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <RouterLink to='/user/login' class="login-router-link">登录</RouterLink>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, h, reactive, ref } from 'vue'
import {useLoginUserStore} from '@/stores/user.ts'
import { storeToRefs } from 'pinia'
import { HomeOutlined } from '@ant-design/icons-vue'
import { MenuProps } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { routes } from '@/router/routes.ts'

const router = useRouter() //获取路由器实例
const route = useRoute() //获取当前路由
const currentRoute = ref<string>(route.path) //当前路由的路径

//右侧 登录用户信息
const loginUserStore = useLoginUserStore()
//⭐
// `loginUser`是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const {loginUser} = storeToRefs(loginUserStore) //为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()
// console.log(loginUser.username);就会报错，但是直接在template中使用就不会报错
// 原因：当在模板中使用ref时，可以直接访问其值，就像访问普通变量一样，而不需要使用.value属性。
// 但是，在JavaScript代码中使用ref时，必须使用.value属性来访问其值。


const current = ref<string[]>(['/']) //item高亮
// 遍历每一项 将label和title和key进行绑定
//⭐为什么需要写两个遍历函数(filter map)
//原因：filter函数的返回值是boolean，map返回值才是对象

//⭐：为什么当全局状态改变后(用户角色编程admin了)，但并没有触发回调函数？
//原因：应该使用操作ref类型的工具即computed
//⭐：loginUser.value.userRole 还是 loginUser.userRole？
//loginUser.value.userRole对因为使用的是const {loginUser} = storeToRefs(loginUserStore)，所以提取出来的loginUser仍是ref类型的
//⭐问题：返回类型
//items是一个数组，但computed的参数应该是一个返回值的函数。解决：()=>{return (数组)}
const items = computed<MenuProps['items']>(() => {
  return (
    routes
      .filter((item) => {
        if(!item.meta){
          if (item.path.startsWith('/admin')) {
            // console.log(loginUser)
            // 如果用户未登录或用户角色不是管理员，过滤掉 /admin 开头的路径
            if (!loginUser || loginUser.value.userRole !== "admin") {
              return false;
            }
          }
          return true;
        }
      })
      .map((item) => {
        return {
          key: item.path,
          icon: item.path === '/' ? h(HomeOutlined) : undefined, // 直接传递组件，不需要包装
          label: item.name,
          title: item.name,
        };
      })
  )
});



// https://antdv.com/components/menu-cn#api 文档中的Menu事件
const clickMenuItem = ({ item, key, keyPath }) => {
  // console.log("keyPath",keyPath);// ['/about']
  // console.log("item",item); //
  // console.log("key:",key);// /about /
  // //当点击时，跳转道响应的路由页面
  // console.log("router",router);
  // console.log("route",route);
  //跳转 ⭐
  // query:为查询字符串,所以是在url后面拼接?=
  // query:{keyPath} <===> keyPath?=keyPath的值
  // query:keyPath <===> 0?=keyPath的值
  // router.replace({query: keyPath });//http://localhost:5173?0=/ or http://localhost:5173?0=/about
  // router.replace({query: {keyPath} });//http://localhost:5173?keyPath=/ or http://localhost:5173?keyPath=/about
  if(currentRoute.value !== key) {    //解决一：表示 当前URL !== 需要跳转的URL 才需要跳转
    router.replace({ path: key }) //http://localhost:5173/ or http://localhost:5173/about
    // router.replace({ path: keyPath[0] });
  }
}

//菜单同步高亮--当前路由对应key的item的
router.afterEach((to, from, failure) => {
  // console.log('to:',to)
  // console.log('from',from)
  // console.log('failure',failure)
  // 当：当前路由与to的fullPath一样时，Vue Router 检测到这是一个冗余导航，并抛出了这个警告。解决：
  // 1. RouterLink组件添加判断--v-if
  // 2. 如果允许重复导航，则直接捕获异常并忽略它即可
  // 解决二：
  // if(failure){
  //   console.warn('failure',failure)
  //   return;//忽略失败
  // }
  // 解决一：见<template>

  current.value = [to.fullPath] //or current.value = [to.path]
  currentRoute.value = route.path //当跳转时，同步更新当前URL
})



//退出登录
const outLoginClick = async () => {
  await loginUserStore.fetchOutLogin()
}
</script>

<style scoped>
#globalHeader .login-router-link{
  background-color: #1677FF;
  padding: 10px 20px;
  border-radius: 10px;
  color: white;
}
</style>
